---
title: ZStack
description: "`ZStack` is used to stack child elements in depth."
storybook: components-stack--depth
source: components/stack
---

```tsx preview
<ZStack>
  {["info", "success", "warning", "error"].map((bg, index) => (
    <Box key={index} bg={bg} color="white" p="md">
      Box
    </Box>
  ))}
</ZStack>
```

## Usage

:::code-group

```tsx [package]
import { ZStack } from "@yamada-ui/react"
```

```tsx [alias]
import { ZStack } from "@/components/ui"
```

```tsx [monorepo]
import { ZStack } from "@workspaces/ui"
```

:::

```tsx
<ZStack />
```

### Changing Direction

To change the direction, set `direction` to `"start"`, `"end-end"`, etc.

```tsx preview
<ZStack direction="start">
  {["info", "success", "warning", "error"].map((bg, index) => (
    <Box key={index} bg={bg} color="white" p="md">
      Box
    </Box>
  ))}
</ZStack>
```

### Reversing Direction

To reverse the direction, set `reverse` to `true`.

```tsx preview
<ZStack direction="center-start" reverse>
  {["info", "success", "warning", "error"].map((bg, index) => (
    <Box key={index} bg={bg} color="white" p="md">
      Box
    </Box>
  ))}
</ZStack>
```

## Props

<PropsTable name="stack" pick={["ZStack"]} />
